import { useEffect, useState, useRef } from "react";

function InputComponent() {
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);
  //泛型
  type User = {
    name: string;
    age: number;
  };
  const [user, setUser] = useState<User>({
    name: "John Doe",
    age: 30,
  });
  // const [car, setCar] = useState<Array | null>([])
  interface IPerson {
    firstName?: string;
    lastName?: number;
  }

  type Props = {
    onGetMsg?: (msg: string) => void; // 定义可选参数，参数类型为string，返回值为void:
  };

  function Son(props: Props) {
    const onChange = () => {
      props.onGetMsg?.("hellozhey world");
    };
    return (
      <div>
        <button onClick={onChange}>发送hallo消息</button>
      </div>
    );
  }

  const [customer, setCustomer] = useState<IPerson>({});
  return (
    <div>
      <div> 基本数据类型：{count}</div>
      <div>
        {user.name}，{user.age}岁
      </div>
      <button onClick={() => setUser({ name: "david", age: 25 })}>
        修改用户信息
      </button>
      <button onClick={() => setCount(count + 1)}>点击增加</button>
      <div>
        用户名称
        {customer?.firstName}
        {customer?.lastName}
      </div>
      <button onClick={() => setCustomer({ firstName: "Tom", lastName: 20 })}>
        修改用户信息
      </button>
      <Son onGetMsg={() => console.log("hallo")} />
      <InputComponent />
    </div>
  );
}

export default App;
